<template>
  <div class="app">
    <h1>{{ msg }}</h1>
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <MySchool :getSchoolName="getSchoolName"></MySchool>

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 (使用@或v-on)-->
    <!-- <MyStudent v-on:atguigu="getStudentName" @demo="m1"></MyStudent> -->

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 （使用ref）-->

    <br /><MyStudent ref="student" @click.native="show"></MyStudent>
    <TestView></TestView>
    <TestView2></TestView2>
  </div>
</template>
<script>
// 引入组件
import MySchool from "./components/MySchool";
import MyStudent from "./components/MyStudent";
import TestView from "./components/TestView";
import TestView2 from "./components/TestView2";
export default {
  name: "App",
  components: {
    MySchool,
    MyStudent,
    TestView,
    TestView2,
  },
  data() {
    return {
      msg: "你好",
    };
  },
  methods: {
    getSchoolName(name) {
      console.log("App收到了:", name);
    },
    getStudentName(name) {
      console.log("App收到了", name);
    },
    m1() {
      console.log("demo事件被触发了");
    },
    show() {
      console.log(124);
    },
  },
  mounted() {
    this.$refs.student.$on("atguigu", this.getStudentName);
  },
};
</script>
<style></style>
